<template>
  <div class="clearfix cal-container" id="cal-container">
    <div class="select-time">
      <div class="time-pick">
          <el-row>
            <el-col :span="4">
              <label style="line-height:38px;">通用比赛时段：</label>
            </el-col>
            <el-col :span="18" >                
              <div v-for="(item,$index) in timeSlot" :key="item">
                <el-time-picker  style="margin-bottom:10px;"
                    is-range
                    v-model="item.value"
                    placeholder="选择时间范围">
                </el-time-picker>
                <el-button icon="minus" class="btn-icon" v-if="$index>0" @click="delTime($index)"></el-button>
              </div>  
            </el-col>
          </el-row>
          <el-button class="add-time" icon="plus" @click="addTime()" :disabled="timeSlot.length>=6">添加时段</el-button>                        
          </div>                   
      </div>
      <div class="month-select">
        <el-row>
            <el-col :offset="8" :span="5" class="relative">
              <el-date-picker
                v-model="month"
                :picker-options="pickerOptions"
                type="month"
                placeholder="选择月">
              </el-date-picker>
            </el-col>
            <el-col :offset="3" :span="4" class="relative">
              <i class="line ab green-line"></i><span class="small">通用比赛的时段</span>
            </el-col>
            <el-col :span="4" class="relative">
              <i class="line ab blue-line"></i><span class="small">非通用比赛的时段</span>
            </el-col>
          </el-row>
      </div>
      <div class="calendar ">
          <ul class="clearfix week" >
              <li class="week-day" v-for="item in weekList" :key="item">
                  <el-checkbox v-model="item.checked"
                  @change="checkTime($event)"></el-checkbox>
                  {{item.label}}
              </li>
          </ul>
          <div class="dates">
              <table class="day-list clearfix" v-for="item in trList" :key="item">
                  <tr class="day-item relative" v-for="(it,$index) in item" :key="it.date" @click="activeThis($event, it)"
                      v-bind:class="{active:it.checked, selected:it.selected}"
                      :disabled="it.disabled">
                      <td>{{it.date}}</td>
                      <div class="ab edit">
                        <i class="iconfont" @click="openMask($event, it)">&#xe61d;</i>
                        <i class="iconfont" @click="handleDel($event,it)">&#xe659;</i>
                      </div>
                      <div class="currency" v-show="mon&&$index==0" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                      <div class="currency" v-show="tue&&$index==1" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                      <div class="currency" v-show="wed&&$index==2" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                      <div class="currency" v-show="thu&&$index==3" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                      <div class="currency" v-show="fri&&$index==4" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                      <div class="currency" v-show="sat&&$index==5" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                      <div class="currency" v-show="sun&&$index==6" @click="showPop($event)"><a v-if="timeSlot[0].value.length">{{timeOne}}-{{timeTwo}}</a></div>
                  </tr>
              </table>
          </div>
      </div>           

    <div class="mask" v-show="maskVisible">
      <div class="message-box">
        <div class="message-box-head">
          <div class="message-box-title">可比赛时段</div>
          <i class="el-icon-close ab close" @click="closeMask()"></i>
        </div>
        <div class="message-box-body">
          <div v-for="(item,$index) in specialTimeList" :key="item">
            <el-time-picker  style="margin-bottom:10px;margin-left:90px;"
                is-range
                v-model="item.value"
                placeholder="选择时间范围">
            </el-time-picker>
            <el-button icon="minus" class="btn-icon" v-if="$index>0" @click="delSpecialTime($index)"></el-button>
          </div>     
          <el-button class="add-time btn-icon" style="margin-left:90px" icon="plus" @click="addSpecialTime()" :disabled="specialTimeList.length>=6">添加时段</el-button>
        </div>
        <div class="message-box-foot">
            <el-button type="primary" @click="sureMask()">确定</el-button>
            <el-button @click="cancelMask()">取消</el-button>
        </div>
      </div>
    </div>
    <div class="ab" v-bind:style="{left: point.x +'px',top: point.y +'px'}" v-show="popVisible">
      <div class="popover right" >
        <i class="el-icon-close icon-close" @click="popVisible=false"></i>       
        <div class="title">比赛的时段</div>    
        <div class="time-item" >          
          <el-row class="time" v-for="(item,$index) in timeSlot" :key="item" v-if="item.value.length">
            <el-col :offset="5" :span="2"><span class="tag">{{$index+1}}</span></el-col>
            <el-col :span="4">{{  new Date(item.value[0]).format('hh:mm')}}</el-col>
            <el-col :span="4">——</el-col>
            <el-col :span="4">{{ new Date(item.value[1]).format('hh:mm') }}</el-col>
          </el-row>
        </div>        
        <div class="arrow"></div>
      </div>
    </div>      
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    components: {
    },
    computed: {
      ...mapGetters({
        race_detail: 'race_detail'
      }),
      timeOne () {
        var d = new Date(this.timeSlot[0].value[0])
        var h = d.getHours() > 10 ? d.getHours() : '0' + d.getHours()
        var m = d.getMinutes() > 10 ? d.getMinutes() : '0' + d.getMinutes()
        return h + ':' + m
      },
      timeTwo () {
        var d = new Date(this.timeSlot[0].value[1])
        var h = d.getHours() > 10 ? d.getHours() : '0' + d.getHours()
        var m = d.getMinutes() > 10 ? d.getMinutes() : '0' + d.getMinutes()
        return h + ':' + m
      },
      mon () {
        return this.weekList[0].checked
      },
      tue () {
        return this.weekList[1].checked
      },
      wed () {
        return this.weekList[2].checked
      },
      thu () {
        return this.weekList[3].checked
      },
      fri () {
        return this.weekList[4].checked
      },
      sat () {
        return this.weekList[5].checked
      },
      sun () {
        return this.weekList[6].checked
      }
    },
    created () {
    },
    mounted () {
      this.setDisableDate()
    },
    watch () {
    },
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            var d = new Date()
            var y = d.getFullYear().toString()
            var M = d.getMonth() + 1 > 10 ? (d.getMonth() + 1).toString() : '0' + (d.getMonth() + 1).toString()
            var sDate = y + '-' + M + '-01'
            return time.getTime() < new Date(sDate) - 8.64e7
          }
        },
        month: '',
        maskVisible: false,
        popVisible: false,
        specialTimeList: [
          {value: ''}
        ],
        point: {
          x: 100,
          y: 100
        },
        weekList: [
          {label: '周一', checked: false},
          {label: '周二', checked: false},
          {label: '周三', checked: false},
          {label: '周四', checked: false},
          {label: '周五', checked: false},
          {label: '周六', checked: false},
          {label: '周日', checked: false}
        ],
        trList: [
          [
            {date: '30', checked: false, disabled: true},
            {date: '31', checked: false},
            {date: '1', checked: false},
            {date: '2', checked: false},
            {date: '3', checked: false},
            {date: '4', checked: false},
            {date: '5', checked: false}
          ],
          [
            {date: '6', checked: false},
            {date: '7', checked: false},
            {date: '8', checked: false},
            {date: '9', checked: false},
            {date: '10', checked: false},
            {date: '11', checked: false},
            {date: '12', checked: false}
          ],
          [
            {date: '30', checked: false},
            {date: '31', checked: false},
            {date: '1', checked: false},
            {date: '2', checked: false},
            {date: '3', checked: false},
            {date: '4', checked: false},
            {date: '5', checked: false}
          ],
          [
            {date: '30', checked: false},
            {date: '31', checked: false},
            {date: '1', checked: false},
            {date: '2', checked: false},
            {date: '3', checked: false},
            {date: '4', checked: false},
            {date: '5', checked: false}
          ],
          [{date: '30', checked: false},
            {date: '31', checked: false},
            {date: '1', checked: false},
            {date: '2', checked: false},
            {date: '3', checked: false},
            {date: '4', checked: false},
            {date: '5', checked: false}
          ],
          [
            {date: '30', checked: false},
            {date: '31', checked: false},
            {date: '1', checked: false},
            {date: '2', checked: false},
            {date: '3', checked: false},
            {date: '4', checked: false},
            {date: '5', checked: false}
          ]
        ],
        timeSlot: [{value: ''}],
        specialOne: {}
      }
    },
    methods: {
      setDisableDate () {
        this.pickerOptions.disabledDate = function (time) {
          var d = new Date()
          var y = d.getFullYear().toString()
          var M = d.getMonth() + 1 > 10 ? (d.getMonth() + 1).toString() : '0' + (d.getMonth() + 1).toString()
          var sDate = y + '-' + M + '-01'
          // var end = this.race_detail.endTime
          return time.getTime() < new Date(sDate) - 8.64e7
          // return time.getTime() < new Date(sDate) - 8.64e7 || time.getTime() > new Date(end) - 8.64e7
        }
      },
      sureMask () {
        this.specialOne.selected = true
        this.maskVisible = false
        this.specialOne = {}
      },
      cancelMask () {
        this.specialTimeList.length = 0
        this.closeMask()
      },
      closeMask () {
        this.maskVisible = false
      },
      openMask (ev, item) {
        ev.stopPropagation()
        this.popVisible = false
        this.specialOne = item
        this.maskVisible = true
      },
      checkTime (e) {
        if (!this.timeSlot[0].value.length) {
          this.$message({
            message: '请先设置一个通用时段',
            type: 'warning'
          })
          e.currentTarget.cancelable = true
          e.currentTarget.defaultPrevented = true
          e.stopPropagation()
        }
      },
      activeThis (e, item) {
        for (let i = 0, len = this.trList.length; i < len; i++) {
          for (let j = 0, jlen = this.trList[i].length; j < jlen; j++) {
            this.trList[i][j].checked = false
          }
        }
        if (item.disabled) {
          return false
        } else {
          item.checked = true
        }
      },
      addTime () {
        if (this.timeSlot.length < 6) {
          this.timeSlot.push({value: ''})
        }
      },
      delTime (index) {
        this.timeSlot.splice(index, 1)
      },
      addSpecialTime () {
        if (this.specialTimeList.length < 6) {
          this.specialTimeList.push({value: ''})
        }
      },
      delSpecialTime (i) {
        this.specialTimeList.splice(i, 1)
      },
      handleDel (event, item) {
        this.specialOne = item
        event.stopPropagation()
        this.$confirm('确定要将该日期删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          item.selected = false
        }).catch(() => {
          this.specialOne = {}
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      showPop (ev) {
        this.popVisible = true
        ev.stopPropagation()
        this.point.x = ev.pageX + 11 || ev.clientX // - ev.offsetX
        this.point.y = ev.pageY - 24 || ev.clientY // - ev.offsetY
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import '../../../styles/calendar.scss';    
</style>
